<template>
  <div class="echart-dataZoom-slider">
    <FormItem
      :form="form"
      option="echart.dataZoom.slider.show"
      :label="$demoi18n('panel.label.transverseSlider')"
      type="switch"
    />
    <FormItem
      v-if="isShowBarNum"
      :form="form"
      option="echart.dataZoom.slider._barNum"
      :label="$demoi18n('echart.label.xAxisGroupsNumber')"
      type="number"
    />
    <FormItem
      v-if="isShowPercent"
      :form="form"
      option="echart.dataZoom.slider.end"
      :label="$demoi18n('echart.label.displayScale')"
      type="number"
    />
    <FormItem
      :form="form"
      option="echart.dataZoom.slider.minValueSpan"
      :label="$demoi18n('panel.label.zoomMinimum')"
      type="number"
      :show-unit="showUnit"
      :units="timeUnits"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import echartDefault from '@/components/common/echart/echart-property-default.js';
import echartUtil from '@/components/common/echart/echart-util.js';
import { mergeObj } from '@/utils/util.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';

export default {
  components: { FormItem },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      timeUnits: [
        { label: this.$demoi18n('word.day'), value: 'day' },
        { label: this.$demoi18n('word.minute'), value: 'minute' },
      ],
    };
  },
  computed: {
    isKline() {
      const arr = ['k-line'];
      if (arr.includes(this.form.echart._componentName)) {
        return true;
      }
      return false;
    },
    showUnit() {
      return this.form.echart.xAxis.type === 'time';
    },
    isShowBarNum() {
      return this.isValid('echart.dataZoom.slider.show') && !this.isTimeValueAxis('x');
    },
    isShowPercent() {
      return this.isValid('echart.dataZoom.slider.show') && this.isTimeValueAxis('x');
    },
  },
  watch: {},
  created() {
    this.initSlider();
    this.initInside();
    this.initWatch();
  },
  methods: {
    initSlider() {
      const dfSlider = JSON.parse(JSON.stringify(echartDefault.echart.dataZoom.slider));
      if (this.isKline) {
        delete dfSlider.backgroundColor;
        delete dfSlider.fillerColor;
        delete dfSlider.height;
        delete dfSlider.handleSize;
        delete dfSlider.moveHandleSize;
        delete dfSlider.borderColor;
        dfSlider.zoomLock = false;
      }

      echartUtil.registerVar('echart.dataZoom.slider', this.form, this, {});
      this.form.echart.dataZoom.slider = mergeObj(dfSlider, this.form.echart.dataZoom.slider);
    },

    // 默认开启缩放和平移功能
    initInside() {
      echartUtil.register('echart.dataZoom.inside', this.form, this);
    },

    initWatch() {
      if (!this.isKline) {
        this.$watch(
          'form.componentStyle',
          componentStyle => {
            const { slider } = this.form.echart.dataZoom;
            slider.backgroundColor = slider._backgroundColor[componentStyle];
            slider.fillerColor = slider._fillerColor[componentStyle];
          },
          { immediate: true },
        );
      }
    },
  },
};
</script>
<style lang="less" scoped></style>
